<template>
  <div class="">
    <el-card class="form-container " shadow="never">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="填写商品信息"></el-step>
        <el-step title="填写商品促销" ></el-step>
        <el-step title="填写商品属性" ></el-step>
        <el-step title="填写商品关联" ></el-step>
      </el-steps>
      <ProductInfoDetail :is-edit="isEdit" v-show="showStatus[0]" v-model="productParams" @nextStep="nextStep"
      @prevStep="prevStep"></ProductInfoDetail>
      <ProductSaleDetail v-show="showStatus[1]" :is-edit="isEdit" v-model="productParams" @nextStep="nextStep"
      @prevStep="prevStep"></ProductSaleDetail>
      <ProductAttrDetail v-show="showStatus[2]" :is-edit="isEdit" v-model="productParams" ></ProductAttrDetail>
      <ProductRelationDetail v-show="showStatus[3]" :is-edit="isEdit" v-model="productParams"></ProductRelationDetail>
    </el-card>
  </div>
</template>

<script>
import ProductInfoDetail from './ProductInfoDetail.vue';
import ProductSaleDetail from './ProductSaleDetail.vue';
import ProductAttrDetail from './ProductAttrDetail.vue';
import ProductRelationDetail from './ProductRelationDetail.vue';
import {mockProductadd,getProduct } from '@/api'
const defaultProductParam = {
    albumPics: '',
    brandId: null,
    brandName: '',
    deleteStatus: 0,
    description: '',
    detailDesc: '',
    detailHtml: '',
    detailMobileHtml: '',
    detailTitle: '',
    feightTemplateId: 0,
    flashPromotionCount: 0,
    flashPromotionId: 0,
    flashPromotionPrice: 0,
    flashPromotionSort: 0,
    giftPoint: 0,
    giftGrowth: 0,
    keywords: '',
    lowStock: 0,
    name: '',
    newStatus: 0,
    note: '',
    originalPrice: 0,
    pic: '',
    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
    memberPriceList: [],
    //商品满减
    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
    //商品阶梯价格
    productLadderList: [{count: 0,discount: 0,price: 0}],
    previewStatus: 0,
    price: 0,
    productAttributeCategoryId: null,
    //商品属性相关{productAttributeId: 0, value: ''}
    productAttributeValueList: [],
    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
    skuStockList: [],
    //商品相关专题{subjectId: 0}
    subjectProductRelationList: [],
    //商品相关优选{prefrenceAreaId: 0}
    prefrenceAreaProductRelationList: [],
    productCategoryId: null,
    productCategoryName: '',
    productSn: '',
    promotionEndTime: '',
    promotionPerLimit: 0,
    promotionPrice: null,
    promotionStartTime: '',
    promotionType: 0,
    publishStatus: 0,
    recommandStatus: 0,
    sale: 0,
    serviceIds: '',
    sort: 0,
    stock: 0,
    subTitle: '',
    unit: '',
    usePointLimit: 0,
    verifyStatus: 0,
    weight: 0
  };
export default {
  name:'ProductDetail',
  components:{},
  data(){
    return {
      active:0,
      //参数整理
      productParams:Object.assign({},defaultProductParam),
      showStatus:[true,false,false,false]
    }
  },
  props:{isEdit:false},
  components:{
    ProductInfoDetail,
    ProductSaleDetail,
    ProductAttrDetail,
    ProductRelationDetail,
    
  },
  created(){
    if(this.isEdit){
      getProduct(this.$route.query.id).then(
        response =>{
          this.productParams = response.data
          console.log('获取商品',response.data)
        }
      )
    }
  },
  methods:{
    //隐藏所有页面
    hiddenAll(){
      for(let i = 0; i<this.showStatus.length; i++){
        this.showStatus[i] = false;
      }
    },
    //当前页面
    prevStep(){
      if(this.active > 0 && this.active<this.showStatus.length){
        this.active--;
        this.hiddenAll();
        this.showStatus[this.active] =true;
      }
    },
    //下一步
    nextStep(){
      if(this.active <this.showStatus.length-1){
        this.active++;
        this.hiddenAll();
        this.showStatus[this.active]=true
      }
    }
  
  }

}
</script>

<style scoped>
.form-container{
  width:800px;
  margin:30px auto;
  border:none;
}
</style>